<template>
	<view class="class_open_index" :style="{width:width}" @click="toDetail">
		<view class="u-flex">
			<image :src="course.img" class="image_"></image>
			<view class="u-m-l-16 u-flex-1">
				<view class="title_ u-line-2">{{course.title}}</view>
				<view class="sub_title_lable u-m-t-8">
					<text>{{course.startAt}}</text>
					<text class="u-m-l-20">{{course.city}}</text>
				</view>
				<view class="u-m-t-30 u-flex u-flex-between u-flex-items-center">
					<price :price="course.price"></price>
					<view class="sub_title_lable">{{course.teacher.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import price from "@/components/common/price.vue"
	import tag from "@/components/common/tag.vue"
	import teacherIconText from "@/components/common/teacher-icon-text.vue"
	import {
		defineProps
	} from 'vue';

	const props = defineProps({
		course: Object,
		width: {
			type: String,
			default: 'auto'
		}
	})

	function toDetail() {
		uni.navigateTo({
			url: `/subPackages/class/open_detail?id=${props.course.id}`
		})
	}
</script>

<style lang="scss" scoped>
	.class_open_index {
		background-color: #fff;
		border-radius: 8px;
		padding: 20rpx 24rpx;
		margin-bottom: 12px;
		box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.06);

		.image_ {
			width: 260rpx;
			height: 186rpx;
			background: #D9D9D9;
			border-radius: 8rpx;
		}

		.title_ {
			flex: 1;
			height: 40px;
			font-weight: bolder;
			font-size: 14px;
		}
	}
</style>